<template>
  <div class="chatActiveItemWrapper">
    <div class="chatActiveItem">
      <i class="iconfont icon-tianjia" @click="addGroup"></i>
      <img
        class="image"
        :src="require('~/assets/images/top4.png')"
        width="50"
        height="50"
        alt="avatar"
      />
      <img
        class="image1"
        :src="require('~/assets/images/top1.png')"
        width="50"
        height="50"
        alt="avatar"
      />
      <img
        class="image2"
        :src="require('~/assets/images/top2.png')"
        width="50"
        height="50"
        alt="avatar"
      />
      <img
        class="image3"
        :src="require('~/assets/images/top3.png')"
        width="50"
        height="50"
        alt="avatar"
      />
    </div>
    <div class="chatListWrapper">
      <template v-for="(item, index) in chatList">
        <div
          :class="['chatItem', curIndex === index ? 'active' : '']"
          :key="index"
          @click="chatItemClick(index)"
          v-if="!item.isGroup"
        >
          <img
            class="image"
            :src="item.src"
            width="45"
            height="45"
            alt="avatar"
          />
          <div class="desc">
            <div class="name">{{ item.name }}</div>
            <div class="message">{{ item.msg }}</div>
          </div>
          <i
            class="iconfont icon-gengduo"
            @click.stop.prevent="showMore(index)"
          ></i>
          <ShowMore
            @directMessage="showMoreDirectMessage($event, index)"
            @follow="showMoreFollow"
            v-if="curShowMoreIndex === index"
          />
        </div>
        <div
          :class="['chatItem group', curIndex === index ? 'active' : '']"
          :key="index"
          @click="chatItemClick(index)"
          v-else
        >
          <div class="images">
            <img
              class="image"
              :key="`src_${itIndex}`"
              v-for="(it, itIndex) in item.src"
              :src="it"
              alt="avatar"
            />
          </div>
          <div class="desc">
            <div class="name">{{ item.name }}</div>
            <div class="message">{{ item.msg }}</div>
          </div>
          <i
            class="iconfont icon-gengduo"
            @click.stop.prevent="showMore(index)"
          ></i>
          <ShowMore v-if="curShowMoreIndex === index" />
        </div>
      </template>
    </div>
    <AddGroup
      @closeDialog="closeDialog"
      :isVisibleEditAvatarDialog.sync="isVisibleEditAvatarDialog"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import ShowMore from './ShowMore.vue'
import AddGroup from '@/components/chat/AddGroup.vue'
import { IChatListPO } from './const'
interface IArrPo {
  name: string
  fn: string
}
@Component({
  components: {
    ShowMore,
    AddGroup,
  },
})
export default class ChatActiveItem extends Vue {
  private curShowMoreIndex = -1
  private curIndex = -1
  private isVisibleEditAvatarDialog = false
  private chatList: IChatListPO[] = [
    {
      id: 1,
      src: require('~/assets/images/1.png'),
      name: 'Nasiru Mohammed',
      msg: 'Your status is hilarious',
      isGroup: false,
    },
    {
      id: 2,
      src: require('~/assets/images/2.png'),
      name: 'Ijafiya Nafa',
      msg: 'Missed voice call',
      isGroup: false,
    },
    {
      id: 3,
      src: require('~/assets/images/3.png'),
      name: 'Emmanuel Yello',
      msg: 'Missed voice call',
      isGroup: false,
    },
    {
      id: 4,
      src: require('~/assets/images/4.png'),
      name: 'Creatives Connect',
      msg: 'By God’s grace our next meeting will b...',
      isGroup: false,
    },
    {
      id: 5,
      src: require('~/assets/images/5.png'),
      name: 'Emerald Konye',
      msg: 'Okay, Thank you!',
      isGroup: false,
    },
    {
      id: 6,
      src: [
        require('~/assets/images/6.png'),
        require('~/assets/images/7.png'),
        require('~/assets/images/8.png'),
        require('~/assets/images/5.png'),
      ],
      name: 'Victor Johnmark',
      msg: 'Victor Johnmark is typing...',
      isGroup: true,
    },
  ]
  private chatItemClick(index: number) {
    this.curIndex = index
    this.curShowMoreIndex = -1
  }
  private showMore(index: number) {
    this.curShowMoreIndex = index
  }
  private showMoreDirectMessage(item: IArrPo, index: number) {
    this.curIndex = index
    console.log(item)
  }

  private showMoreFollow(item: IArrPo) {
    console.log(item)
  }

  // 添加群组，或者私聊
  private addGroup() {
    this.isVisibleEditAvatarDialog = true
    console.log('dsdsdsd')
  }
  // 关闭弹框的回调
  private closeDialog(val: boolean) {
    this.isVisibleEditAvatarDialog = val
  }
}
</script>

<style lang="scss" scoped>
.chatActiveItem {
  padding: 18px 9px;
  border-bottom: 1px solid #2a292e;
  display: flex;
  align-items: center;
  i {
    cursor: pointer;
    font-size: 50px;
    color: #666;
    &:hover {
      color: #fff;
      transition: color 0.5s;
    }
  }
  img {
    cursor: pointer;
    &:hover {
      box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px,
        rgba(255, 255, 255, 0.12) 0px -12px 30px,
        rgba(255, 255, 255, 0.12) 0px 4px 6px,
        rgba(255, 255, 255, 0.17) 0px 12px 13px,
        rgba(255, 255, 255, 0.09) 0px -3px 5px;
      transition: box-shadow 0.5s;
    }
  }
  .image {
    border-radius: 50%;
    left: 10px;
    position: relative;
  }
  .image1 {
    border-radius: 50%;
    left: 0px;
    position: relative;
  }
  .image2 {
    border-radius: 50%;
    left: -10px;
    position: relative;
  }
  .image3 {
    border-radius: 50%;
    left: -20px;
    position: relative;
  }
  .image4 {
    border-radius: 50%;
    left: -30px;
    position: relative;
  }
}
.chatItem {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #2a292e;
  &:hover {
    transition: all 0.5s;
    background-color: #24252f;
    // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    // box-shadow: 0 2px 20px rgb(0 0 0 / 50%);
    box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px,
      rgba(255, 255, 255, 0.12) 0px -12px 30px,
      rgba(255, 255, 255, 0.12) 0px 4px 6px,
      rgba(255, 255, 255, 0.17) 0px 12px 13px,
      rgba(255, 255, 255, 0.09) 0px -3px 5px;
    .desc {
      .message {
        color: #25d366;
      }
    }
  }
  &.active {
    transition: all 0.5s;
    background-color: #24252f;
    // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    // box-shadow: 0 2px 20px rgb(0 0 0 / 50%);
    box-shadow: rgba(255, 255, 255, 0.25) 0px 54px 55px,
      rgba(255, 255, 255, 0.12) 0px -12px 30px,
      rgba(255, 255, 255, 0.12) 0px 4px 6px,
      rgba(255, 255, 255, 0.17) 0px 12px 13px,
      rgba(255, 255, 255, 0.09) 0px -3px 5px;
    .desc {
      .message {
        color: #25d366;
      }
    }
  }
  .desc {
    padding-left: 5px;
    .name {
      color: #fff;
      margin-bottom: 4px;
    }
    .message {
      width: 150px;
      font-size: 12px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .images {
    display: flex;
    align-content: center;
    flex-wrap: wrap-reverse;
    justify-content: center;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    img {
      flex: none;
      width: 50%;
    }
    img:only-child {
      width: 100%;
    }
    img:first-child:nth-last-child(n + 5),
    img:first-child:nth-last-child(n + 5) ~ img {
      width: calc(100% / 3);
    }
  }
  i {
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    color: #fff;
  }
}
</style>